import { useEffect, useState } from 'react'
import { Form, Input, Button, message, Tabs, Checkbox } from 'antd'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faQrcode } from '@fortawesome/free-solid-svg-icons'
import { useNavigate } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { login } from '@/store/slices/userSlice'
import './index.scss'

const Login = () => {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const { loading, token } = useSelector((state) => state.user)
  const [activeTab, setActiveTab] = useState('password')
  const [showQrCode, setShowQrCode] = useState(false)

  useEffect(() => {
    if (token) {
      navigate('/dashboard')
    }
  }, [token, navigate])

  const onFinish = async (values) => {
    try {
      await dispatch(login(values)).unwrap()
      message.success('登录成功')
      navigate('/dashboard')
    } catch (error) {
      message.error(error?.message || '登录失败')
    }
  }

  return (
    <div className="login-container">
      <div className="login-content">
        {/* 左侧标题和描述 */}
        <div className="left-section">
          <div className="brand-content">
            <h1 className="brand-title">智慧阅读管理平台</h1>
            <p className="brand-subtitle">Reading Management System</p>
            <div className="description-text">
              <p>专业的阅读数据分析与管理解决方案</p>
              <p>为教育机构提供全面的阅读行为分析</p>
              <p>助力培养良好的阅读习惯</p>
            </div>
          </div>
        </div>

        {/* 右侧登录表单卡片 */}
        <div className="right-section">
          <div className="form-card">
            {!showQrCode && (
              <Button 
                type="link" 
                className="wechat-login-link"
                onClick={() => setShowQrCode(true)}
              >
                微信扫码登录
              </Button>
            )}

            <div className="login-form">
            {showQrCode ? (
              // 二维码扫码界面
              <div className="qrcode-container">
                <h3 className="qrcode-title">扫码登录</h3>
                <div className="qrcode-box">
                  <div className="qrcode-placeholder">
                    <p>请使用微信扫描二维码登录</p>
                  </div>
                </div>
                <Button 
                  type="link" 
                  className="back-to-form-btn"
                  onClick={() => setShowQrCode(false)}
                >
                  返回账号登录
                </Button>
              </div>
            ) : (
              <>
                <Tabs 
                  activeKey={activeTab} 
                  onChange={setActiveTab}
                  className="login-tabs"
                  items={[
                    {
                      key: 'password',
                      label: '密码登录',
                    },
                    {
                      key: 'code',
                      label: '验证码登录',
                    }
                  ]}
                />
                {activeTab === 'password' ? (
                <Form
                  name="login"
                  onFinish={onFinish}
                  autoComplete="off"
                  size="large"
                >
                  <Form.Item
                    name="username"
                    rules={[{ required: true, message: '请输入手机号/账号' }]}
                  >
                    <Input 
                      placeholder="账号"
                      autoComplete="username"
                    />
                  </Form.Item>

                  <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入密码' }]}
                  >
                    <Input.Password 
                      placeholder="密码"
                      autoComplete="current-password"
                    />
                  </Form.Item>

                  <div className="form-options">
                    <Form.Item name="remember" valuePropName="checked" noStyle>
                      <Checkbox>记住密码</Checkbox>
                    </Form.Item>
                    <a href="#forgot" className="forgot-link">忘记密码</a>
                  </div>

                  <Form.Item className="login-button-wrapper">
                    <Button 
                      type="primary" 
                      htmlType="submit" 
                      block 
                      loading={loading}
                      className="login-btn"
                    >
                      {loading ? '登录中...' : '登录'}
                    </Button>
                  </Form.Item>
                </Form>
              ) : (
                <Form
                  name="code-login"
                  onFinish={onFinish}
                  autoComplete="off"
                  size="large"
                >
                  <Form.Item
                    name="phone"
                    rules={[{ required: true, message: '请输入手机号' }]}
                  >
                    <Input 
                      placeholder="手机号"
                    />
                  </Form.Item>

                  <div className="code-input-group">
                    <Form.Item
                      name="code"
                      rules={[{ required: true, message: '请输入验证码' }]}
                      style={{ marginBottom: 0, flex: 1 }}
                    >
                      <Input 
                        placeholder="验证码"
                      />
                    </Form.Item>
                    <Button type="link" className="get-code-btn">
                      获取验证码
                    </Button>
                  </div>

                  <Form.Item className="login-button-wrapper">
                    <Button 
                      type="primary" 
                      htmlType="submit" 
                      block 
                      loading={loading}
                      className="login-btn"
                    >
                      {loading ? '登录中...' : '登录'}
                    </Button>
                  </Form.Item>
                </Form>
              )}
              </>
            )}
            </div>
          </div>
        </div>
      </div>
      
      <div className="copyright">
        <span>Copyright ©2023-2026 SunshineJun All Rights Reserved</span>
      </div>
    </div>
  )
}

export default Login
